<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <title>p46-48列表动画</title>
    <style>
        li{
            border: 1px dashed #999;
            margin: 5px;
            line-height:35px;
            padding: 5px;
            font-size: 12px;
            width: 100%;
        }
        li:hover{
            background-color: hotpink;
            transition: ease 0.5s all  ;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.6s ease;
        }
        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加</h3>
              </div>
              <div class="panel-body">
                   <label>
                       Id:
                       <input type="text" v-model="id" class="form-control">
                   </label>
                   <label>
                        Name:
                        <input type="text" v-model="name" class="form-control">
                    </label>
                    <input type="button" value="添加" @click="add">
              </div>
        </div>
        
            <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
            <!-- 给trnsition-group添加appear属性，实现页面刚展示出来的时候，入场时候的效果 -->
            <!-- 通过为transiton-group元素设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签 -->
            <transition-group appear tag="ul">
                    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                            {{item.id}}--{{item.name}}
                     </li>
            </transition-group>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                id:"",
                name:"",
                list:[
                    {id:1,name:"赵高"},
                    {id:2,name:"秦桧"},
                    {id:3,name:"严嵩"},
                    {id:4,name:"魏忠贤"}
                ]
            },
            methods:{
                add(){
                    this.list.push({
                        id:this.id,
                        name:this.name
                    })
                    this.id=this.name="";
                },
                del(indexnum){
                    this.list.splice(indexnum,1);
                }
            },
            filters:{},
            directives:{}
        })
    </script>
</body>
</html>